<template>
    <div>
        <div>姓名:{{name}}</div>
        <div>{{student}}</div>
        <div>{{personNames}}</div>
        <button @click="addAgeToStudent">给student对象添加新的属性</button>
        <button @click="pushPerson">给数组添加信息</button>
    </div>
</template>

<script>
/* 
  一、自动检测对象中新增元素的变化页面不立即刷新的问题的几种解决方法
  1、使用$set()方法完成:  this.$set(this.student,'age',23)
  2、Vue.set()方式完成: Vue.set(this.student,'age',33)
  3、ES6的扩展运算符方式完成： this.student={
                ...this.student,
                age:45
            }
  4、使用Object.assign方法完成深拷贝
  5、使用 this.$forceUpdate()
  二、删除对象中的属性实现自动检测的方式
  1、Vue.delete()
  2、this.$delete()

  三、自动检测数组中利用下标操作元素不自动检测的的几种解决方法
  1、使用this.$set()方式解决
  2、使用Vue.set()方式解决
  3、使用this.$forceUpdate()来解决

  四、解决数组长度自动检测
  1、 this.personNames=[]
  2、使用数组的splice()方法
*/
import Vue from 'vue'
export default {
    data(){
        return{
            name:'Giles',
            student:{
                name:'jack',
                sex:'男',
                education:'本科'
            },
            personNames:['张三','李四']
        }
    },
    methods:{
        addAgeToStudent(){
            
            //delete this.student.name
            //Vue.delete(this.student,"sex")
            //this.$set(this.student,'age',23)
            //this.$delete(this.student,"sex")
            //Vue.set(this.student,'age',33)
            // this.student={
            //     ...this.student,
            //     age:45
            // }
            //this.student=Object.assign({},this.student,{age:23})
            // this.student.age=23
            // this.$forceUpdate()
        },
        pushPerson(){
            this.personNames[2]='王五'
            this.$forceUpdate()
            //this.personNames.length=0
            //this.$set(this.personNames,2,'赵六')
            //Vue.set(this.personNames,2,'黄世仁')
            //this.personNames=[]
            //this.personNames.splice(0)
        }
    }
}
</script>

<style>

</style>